<template>
  <div class="user_left fl" >
    <h3>
      <router-link  to="/my/me" class="wp100 bg4448f8 f16 cfff bl">用户中心</router-link >
    </h3>
    <div class="nav_menu pt10 f14">
      <p>
        <i class="n1"></i>交易管理
      </p>
      <router-link class="nameA" to="/my/order" active-class="active" data="1">我的订单</router-link >
      <router-link class="nameA" to="/my/price" active-class="active" data="2">我的询价单</router-link >
      <router-link class="nameA" to="/my/shipments" active-class="active" data="3">我的发货单</router-link >
      <!-- <router-link  to="/user/discountinfo/index.aspx" data="20">我的专属折扣</router-link > -->
      <p>
        <i class="n3"></i>我的账户
      </p>
      <router-link class="nameA" to="/my/collect" active-class="active" data="7">我的收藏</router-link >
      <router-link class="nameA" to="/my/history" active-class="active" data="8">购物历史</router-link >
      <router-link class="nameA" to="/my/coupons" active-class="active" data="8">我的优惠券</router-link >
      <p>
        <i class="n4"></i>账户管理
      </p>
      <router-link class="nameA" to="/my/news" active-class="active" data="13">推送消息</router-link >
      <router-link class="nameA" to="/my/feedback" active-class="active" data="30">意见反馈</router-link >
      <router-link class="nameA" to="/my/VerifiedMember" active-class="active" data="18">会员认证</router-link >
      <router-link class="nameA" to="/my/detail" active-class="active" data="15">账户绑定</router-link >
      <router-link class="nameA" to="/my/safe" active-class="active" data="16">安全中心</router-link >
      <router-link class="nameA" to="/my/address" active-class="active" data="17">收货地址</router-link >
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'left-nav',
  data () {
    return {
    }
  },
  created () {
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  z-index: 0;
  .user_left {
    padding: 30px 25px 34px;
    width: 180px;
    background: #fff;
    .wp100 {
      display: block;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 3px;
      background: #4448f8;
      color: #fff;
      font-size: 18px;
    }
    .wp100:hover, input.bg4448f8:hover {
      background: rgba(68, 72, 248, 0.7);
      cursor: pointer;
    }
    .f14 {
      font-size: 14px;
    }
    .pt10 {
      padding-top: 10px;
    }
    .nav_menu {
      .nameA {
        display: block;
        line-height: 34px;
        padding-left: 40px;
        font-size: 14px;
        text-align: left;
        // padding-left: 10px;
        &.active {
          color: rgba(68, 72, 248, 0.7);
        }
      }
      .nameA:hover {
        cursor: pointer;
        color: #4448f8;
      }
      p {
        font-size: 16px;
        color: #333;
        line-height: 16px;
        padding: 0 0 10px 0;
        margin: 30px 0 0 25px;
        position: relative;
        text-align: left;
        font-weight: 700;
        i {
          background-position: 0 -40px;
          width: 14px;
          height: 17px;
          position: absolute;
          left: -26px;
          top: 0;
          // background: url('../../assets/img/ubg_ico.png') no-repeat 0 0;
        }
      }
    }
  }
  .mr20 {
    margin-right: 20px;
  }
  .fl {
    float: left;
    display: inline;
  }
}
.clearfix {
  zoom: 1;
}

</style>
